<template>
    <div>
        <cephalosome/>
        <el-row class="subject">
            <div class="product-img">
                <img :src="'../images/'+food.foodImg">
            </div>
            <div class="product-info">
                <h2>{{food.foodName}}</h2>
                <p>
                    <el-rate style="display: inline-block; margin-left: 10px;"
                      v-model="value"
                      disabled
                      show-score
                      text-color="#ff9900"
                      score-template="{value}">
                    </el-rate>
                </p>
                <h1>￥{{food.foodPrice}}</h1>
                <p class="describe">
                    {{food.foodDetails}}
                </p>
                <p>SIZE:</p>
                <el-radio-group v-model="radio1" size="large">
                  <el-radio-button label="XL"></el-radio-button>
                  <el-radio-button label="L"></el-radio-button>
                  <el-radio-button label="M"></el-radio-button>
                  <el-radio-button label="S"></el-radio-button>
                </el-radio-group>
                <p>数量:</p>
                <el-input-number v-model="num" :min="0" :max="10"></el-input-number>
                <p class="btn">
                    <button @click="jz">立即购买</button>
                    <button @click="gwc">添加到购物车</button>
                </p>
            </div>
        </el-row>
        <tail />
    </div>
</template>
<script>
import cephalosome from '@/pages/header.vue'
import {selectfoodlistByName} from '../api/api.js'
import tail from './demo.vue'

export default {
    name: 'single-product',
    data(){
        return{
            value:4.5,
            radio1: 'L',
            num:0,
            name:"",
            food:{}
        }
    },
    created() {
        this.name=this.$route.params.name;
        this.getfood()
    },
    methods: {
        getfood(){
            selectfoodlistByName(this.name).then(res=>{
                this.food=res;
                console.log(this.food);
                
            })
        },
        jz(){
            this.$router.push({path:'/checkout'})
        },
        gwc(){

        }
    },
    components: {
      cephalosome,
      tail
    }
}
</script>
<style scoped>
.subject{
    width: 1500px;
    margin: 0 auto;
    height: 900px;
    padding: 50px;
}
.subject img{
    width: 700px;
    height: 700px;
}
.product-img{
    float: left;
    width: 700px;
    height: 700px;
    display: inline-block;
}
.product-info{
    float: left;
    display: inline-block;
    width: 650px;
    height: 800px;
    margin: 0 0 0 50px;
}
h2{
    font-size: 30px;
    margin: 5px;
}
h1{
    font-size: 40px;
    margin: 5px;
    color: #64a54a;
}
p{
    line-height: 70px;
}
.describe{
    color: gray;
    line-height: 40px;
}
.btn{
    margin-top: 20px;
}
.btn-check{
    list-style: none;
    width: 100px;
    height: 40px;
    border-radius: 10px;
    text-align: center;
}
.btn button:first-child{
    width: 150px;
    height: 60px;
    border: none;
    border-radius: 5px;
    background-color: #72b757;
    color: white;
}
.btn button:last-child{
    width: 200px;
    height: 60px;
    border: none;
    border-radius: 5px;
    background-color: black;
    margin-left: 20px;
    color: white;
}
</style>

